<template>
	<view class="select-tabbar">
		<view class="select-tabbar-tabs">
			<template v-for="(item, index) in selectData" :key="index">
				<view class="select-tabbar-tabs-item" :class="{ active: index == currentIndex }" @click="handleChangeSelect(item, index)" :style="tabItemStyle">
					{{ item.label }}
				</view>
			</template>
		</view>

		<view class="select-tabbar-underline" :style="underlineStyle"></view>
	</view>
</template>

<script setup>
	import { ref, watch, onMounted, getCurrentInstance, nextTick } from 'vue';
	const _this = getCurrentInstance();

	// - props/emit
	const props = defineProps({
		currentIndex: {
			type: Number,
			default: () => 0
		},
		selectData: Array,
		tabItemStyle: {
			type: Object,
			default: () => ({
				fontSize: '28rpx'
			})
		},
		underlineBackgroundColor: {
			type: String,
			default: () => '#ffffff'
		},
		activeColor: {
			type: String,
			default: () => '#ffffff'
		}
	});
	const emit = defineEmits(['tabClick']);

	// - data
	const currentIndex = ref(0);
	const underlineStyle = ref({});
	const initLeft = ref('');

	// - methods
	// 用于计算下划线宽度与滑动位置
	const updateUnderline = () => {
		nextTick(() => {
			uni.createSelectorQuery()
				.in(_this)
				.selectAll('.select-tabbar-tabs-item')
				.boundingClientRect((tabRes) => {
					const tabWidth = tabRes[currentIndex.value].width;
					const tabLeft = tabRes[currentIndex.value].left;

					underlineStyle.value = {
						transform: `translateX(${tabLeft}px)`,
						left: 0,
						width: `${tabWidth}px`,
						opacity: 1,
						backgroundColor: props.underlineBackgroundColor
					};
				})
				.exec();
		});
	};
	// 用于初始化计算下划线宽度和滑动位置（解决初始下划线从页面最左侧进入的问题）
	const initUnderlineLeft = () => {
		nextTick(() => {
			uni.createSelectorQuery()
				.in(_this)
				.selectAll('.select-tabbar-tabs-item')
				.boundingClientRect((tabRes) => {
					const tabWidth = tabRes[currentIndex.value]?.width;
					const tabLeft = tabRes[currentIndex.value]?.left;
					initLeft.value = tabLeft + 'px';

					underlineStyle.value = {
						width: `${tabWidth}px`,
						opacity: 1,
						backgroundColor: props.underlineBackgroundColor
					};
				})
				.exec();
		});
	};
	// 用于处理tab点击
	const handleChangeSelect = (item, index) => {
		currentIndex.value = index;

		emit('tabClick', { item, index });
	};
	// 用于处理滑动切换当前tabbar的currentIndex
	const handleUpdateCurrentIndex = (newIndex) => {
		currentIndex.value = newIndex;
	};

	// - watch
	watch(currentIndex, () => {
		updateUnderline();
	});

	// - lifecycle
	onMounted(() => {
		// 注意：如果是在弹窗里，可能需要手动调用一次initUnderlineLeft方法来初始化（注意调用的时机，要保证元素生成之后调用，此时才可以获取到真实的大小和位置）
		initUnderlineLeft();
		currentIndex.value = props.currentIndex;
	});

	// - expose
	defineExpose({ initUnderlineLeft, updateUnderline, handleUpdateCurrentIndex });
</script>

<style lang="scss">
	.select-tabbar {
		width: 100%;

		.select-tabbar-tabs {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			width: 100%;
			box-sizing: border-box;
			// padding: 0 40rpx;

			.select-tabbar-tabs-item {
				font-size: 28rpx;
				font-weight: 600;
				color: rgba(255, 255, 255, 0.5);
				text-align: center;
				margin-right: 80rpx;
			}
			.select-tabbar-tabs-item:last-of-type {
				margin-right: 0 !important;
			}
			.select-tabbar-tabs-item.active {
				color: v-bind(activeColor) !important;
			}
		}

		.select-tabbar-underline {
			position: absolute;
			bottom: -14rpx;
			left: v-bind(initLeft);
			width: 0;
			height: 4rpx;
			border-radius: 10rpx;
			opacity: 0;
			transition: all 0.3s ease-in-out;
		}
	}
</style>
